<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>忘记密码</title>
		<style>
			body {
				height: auto;
				width: auto;
				background: url("img/beijing.jpg") no-repeat;
				background-size: 100% 100%;
			}
			
			#tup {
				height: 120px;
				width: auto;
				
				text-align: center;
			}
			
			#tub {
				height: 100px;
				width: 100px;
				margin-top: 10px;
				border-radius: 50px;
				border: 1px solid #545454;
			}
			
			#zhut {
				height: 600px;
				width: auto;
				
				margin-top: 10px;
				text-align: center;
				
			}
			/* <!-- ----------------------昵称-------------		 */
						.user{
							height: 30px;
							width: 300px;
							margin-bottom: 5px;
							padding-left:10px ;
							border-radius: 5px;
							text-color: #7A7A7A;
							border: 1px solid #545454;
							background-color: transparent;
						}
						
						
			 /* ----------------海外手机------------------- -- */
				
						#tphone{
							height: 30px;
							width: 300px;	
							
							margin: auto;
							text-align: left;
							
						}	
/* -------------------验证码----------------------- */
			#yz{
				height: 36px;
				width: 300px;
				margin: auto;
				border-radius: 5px;
				
				
			}
			.ya1{
				height: 30px;
				width: 194px;
				border-radius: 5px;
				padding-left: 5px;
				border: 1px solid #545454;
				text-align: left;
				color: #545454;
				float: left;
				background-color: transparent;
			}
			.ya2{
				height: 30px;
				width: 81px;
				margin-left: 10px;
				border-radius: 5px;
				text-align: center;
				color:  #545454;
				border: 1px solid #545454;
				float: left;
				font-size: 20px;
				background-color: transparent;
			}
			/* <!-- -----密码框----------------- --> */
			#user_pwd{
				margin-top: 15px;
				
				height: 30px;
				width: 290px;
				padding-left:10px ;
				border-radius: 5px;
				text-color: #7A7A7A;
				border: 1px solid #545454;
				background-color: transparent;
			}
			/* - ---------注册------------------- */
			#user_sub{
				margin-top: 15px;
				height: 30px;
				width: 300px;
				padding-left:10px ;
				border-radius: 5px;
				color: #7A7A7A;
				border: 1px solid #545454;
				background-color: transparent;
			}
			.login{
				color: #7A7A7A;
			}
			
			.msg{
				height: 25px;
				font-size: 13px;
				color: #7A7A7A;
			}
			
			
		</style>
	</head>
	<body>
		<div id="tup">
					<img src="img/tubiao.png" id="tub">
				</div>
				<div id="zhut">
					<form action="#" method="post">
						<!-- ----------------------手机号------------- -->
						<p><input type="text" class="user" id="user_phone" placeholder="请输入您的手机号" />
						<span id="msg_phone" class="msg">
						<p><span id="msg_isphone" class="msg"></span>		
						
						<!-- ----------------海外手机------------------- -->
				
						<div id="tphone">
							<input type="radio" id="tphone1" value="1" />
							<label for="tphone1" class="tphone2" style="color: #5D5F63;" >这是一个海外手机号</label>
					
						</div>
			
		<!-- ---------------------验证码-------------------------- -->
						<p><div id="yz">
							<input type="text" class="ya1" id="ya1" placeholder="请输入您的验证码" />
							
							<span id="ya3" class="ya2"> 4TU8 </span>
								
							<span id="user_yzm" class="msg"></span>
						</div>
						
		<!------------------------- -----密码框-------------------------- -->
				<p><input type="password" id="user_pwd" placeholder="新密码至少为9位" />
				<span id="msg_pwd" class="msg">
		
		<!------------------------------ ---------注册--------------------------- -->
						<p><input type="button" id="user_sub" value="提交" />
						<p><span id="msg_zhuce" class="msg">
							点击提交 找回密码...
						</span>
		
						<p class="login">
							<a href="./login.html" class="login">想起密码了？请&nbsp;登录</a>
						</p>
					</form>
				</div>
		<script >
			let isPhoneZc = false   			//  手机号是否注册过
			let b =''							//  验证码存储		
		
			// -----------------------------加载完窗口-执行---------------------
			window.onload = function(){
				yaz()
				
			}
		// ----------------------------随机生成-验证码-------------------
		function yaz(){
		
			let yanArr = [36]
			for(let i=0; i<36; i++){
				if(i<26){
					yanArr[i] = String.fromCharCode(i+65)
				}else{
					yanArr[i] =parseInt(i-26)
				}
				
			}
			var a=[4]
			
			for(let j=0; j<4; j++){
				a[j] = yanArr[parseInt(Math.random()*yanArr.length)] 
			}
			b = a.join("");   
			ya3.innerHTML = b  
		
				
		}

	// ----------------------------------验证码查看框点击事件-----------------------	
		ya3.onclick = function(){
			yaz()
			
		}
		
		
	
	// ----------------------------------验证码输入框失去焦点---------------		   
			ya1.onblur = function(){
				  	// 验证码是否错误
				let ya = ya1.value.toUpperCase()
				console.log( ya)
				ya1.value = ya
				console.log(b)
				if(ya===''){
					
				}else{
					if(ya!==b ){
						yazIsnNull = true   	// 验证码是否错误
						user_yzm.innerHTML = '验证码错误'
						yaz()
					}else{
						yazIsnNull = false 
						user_yzm.innerHTML = '验证码正确'
					}
				}

			}
	
				// -------------------------判断手机号是否存在-------------------		
				user_phone.onblur = function(){
					let phone = user_phone.value
					// -----------------------------是否为11---------------------
					if(phone.length!==11){
						msg_phone.innerHTML = "手机号为11位"
						msg_isphone.innerHTML = ''
					}else{
						msg_phone.innerHTML = ""
						
						let xhr = new XMLHttpRequest()
						// http://127.0.0.1:3000/v1/user/phone?uphone=12345678911
						let url = `/v1/user/phone?uphone=${phone}`
						console.log(url)
						xhr.open('GET',url)
						xhr.onload = function(){
							let result = xhr.responseText
							console.log(result)
							console.log(result.length)
							
							if(result.length>2){
								isPhoneZc = true   //  手机号已经注册过
								msg_isphone.innerHTML = '手机号已注册'
								
							}else{
								isPhoneZc = false   //  手机号没有已经注册过
								msg_isphone.innerHTML = '未注册手机号，请跳转注册页面注册新用户'
							}
							
						}
						xhr.send()
						
					}
				}
				
			// ---------------------密码为9位-----------------
			user_pwd.onblur = function(){
				let p = user_pwd.value
				console.log(p)
				if(p.length < 9){
					pwdIsnNull = true             // 密码为空
					msg_pwd.innerHTML = "密码至少为9位"
				}else{
					pwdIsnNull = false             // 密码不为空
					msg_pwd.innerHTML = ""

				}		
			}
			
			// -------------提交 找回密码---------------
			user_sub.onclick = function(){
				
				if(!isPhoneZc){
					msg_zhuce.innerHTML = '未注册手机号，请跳转注册页面注册新用户'
					return;
				}
				let uphone = user_phone.value
				let upwd = user_pwd.value
				
				let xhr = new XMLHttpRequest()
				let url = `/v1/user/login?uphone=${uphone}&pwd=${upwd}`
				console.log(url)
				xhr.open('GET',url)
				xhr.onload = function(){
					let result = xhr.responseText

					console.log(result[0].length)
					if(result.length>2){
						msg_zhuce.innerHTML = '密码找回成功'
					}else{
						msg_zhuce.innerHTML = '密码错误'
						
					}	
					console.log('re2',result)
				}
				xhr.send()		
			}		
		
		
		
		
			</script>
		
		
		
	</body>
</html>